<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">角色管理</h3>
    </div>

    <form class="form-horizontal">
        <div class="box-body">
            <div class="form-group">
                <label for="nameId" class="col-sm-2 control-label">名称</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="nameId" placeholder="名称">
                </div>
            </div>
            <div class="form-group">
                <label for="noteId" class="col-sm-2 control-label">描述</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="noteId" placeholder="描述">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">授权</label>
                <div class="col-sm-10">
                    <ul id="menuTree" class="ztree"></ul>
                </div>
            </div>
        </div> <!-- /.box-footer -->
        <!-- /.box-body -->
        <div class="box-footer">
            <button type="button" class="btn btn-default btn-cancel">取消</button>
            <button type="button" class="btn btn-info pull-right btn-add">添加</button>
        </div>
    </form>
</div>
<script type="text/javascript" src="/bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript">
    var zTree;
    var setting={
        data:{
            simpleData:{
                enable:true,//使用简单数据模式
                idKey:"id",//节点数中保存唯一标识的属性名称
                pIdKey:"parentId",//节点数据中保存父节点的唯一ID
                rootPId:null
            }
        },
        check:{
            enable:true,
            nocheckInherit:true
        }//此配置提供复选框操作   可以官网查
    };
    $(function () {
        doLoadSysMenus();
        $(".box-footer").on("click",".btn-add",doSaveOrUpdate);
        $(".box-footer").on("click",".btn-cancel",doCanCle);
    })
    function doCanCle() {
        $("#mainID").removeData();
        $("#mainID").load("/role/role_list");
    }
    function doSaveOrUpdate() {
        //获取表单的数据
        var params=doGetEditFormData();
        var insertUrl="/role/doSaveObject";
        var updateUrl="/role/doUpdateObject";
        var rowData=$("#mainID").data("rowData");
        if (rowData){
            params.id=rowData.id;
            $("#mainID").removeData();
        }
        var url=rowData?updateUrl:insertUrl;
        $.post(url,params,function (result) {
            if(result.state==1){
                alert("操作成功！");
                doCanCle();
            }else {
                alert(result.message);
            }
        })
    }
    function doGetEditFormData() {
        var params={
            name:$("#nameId").val(),
            note:$("#noteId").val()
        };
        var menuIds=[];
        var checkedNodes=zTree.getCheckedNodes(true);//通过树结构对象 拿到选中的节点
        for (var i in checkedNodes){
            menuIds.push(checkedNodes[i].id);
        }
        params.menuIds=menuIds.toString();
        return params;
    }
    function doLoadSysMenus() {
        var url="/menu/doFindZtreeMenuNodes";
        $.getJSON(url,function (result) {
            if(result.state==1){
                zTree=$.fn.zTree.init(
                    $("#menuTree"),
                    setting,
                    result.data
                );
                var data=$("#mainID").data("rowData");
                if (data){
                    doInitFormData(data);
                }
            }else {
                alert(result.message);
            }
        })
    }
    function doInitFormData(data) {
        $("#nameId").val(data.name);
        $("#noteId").val(data.note);
        zTree.expandAll(true);
        var menuIds=data.menuIds;
        for (var i in menuIds){
            var node=zTree.getNodeByParam("id",menuIds[i]);
            zTree.checkNode(node,true,false);
        }
    }
</script>